<template>
	<view class="store-upgrade-date-layout">
		<text class="store-upgrade-date-title">{{props.title}}</text>
		<view class="store-upgrade-date-right">
			<text class="store-upgrade-date-text" :class="[startDate ? '' : 'placeholder-text']" @tap="showSelectDate('start')">{{startDate || '开始日期'}}</text>
			<text class="store-upgrade-date-space">至</text>
			<text class="store-upgrade-date-text" :class="[endDate ? '' : 'placeholder-text']" @tap="showSelectDate('end')">{{endDate || '结束日期'}}</text>
			<xh-checkbox text="长期" v-if="props.showLongTime" :isChecked="busRegType == '0'" @change="change"></xh-checkbox>
		</view>
		<uv-datetime-picker ref="datePickerStartRef" v-model="selectDateValue_start" mode="date" @confirm="confirmStart">
		</uv-datetime-picker>
		<uv-datetime-picker ref="datePickerEndRef" v-model="selectDateValue_end" mode="date" @confirm="confirmEnd">
		</uv-datetime-picker>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	import dayjs from 'dayjs'
	
	const startDate = defineModel('startDate')
	const endDate = defineModel('endDate')
	const busRegType = defineModel('busRegType')
	const selectDateValue_start = ref(startDate.value ? dayjs(startDate.value).valueOf() : Number(new Date()))
	const selectDateValue_end = ref(endDate.value ? dayjs(endDate.value).valueOf() : Number(new Date()))
	const datePickerStartRef = ref(null)
	const datePickerEndRef = ref(null)
	
	const props = defineProps({
		// 标题
		title:{
			type:String,
			default:'证件有效期'
		},
		// 是否有勾选长期功能
		showLongTime:{
			type:Boolean,
			default:true
		},
		// 是否可以操作选择日期
		isSelectDate:{
			type:Boolean,
			default:true
		}
	})
	// 选择长期回调
	const emits = defineEmits(['checkChanged'])
	// 复选框选择回调
	const change = (checked) => {
		busRegType.value = checked ? '0' : '1'
		emits('checkChanged',checked)
	}
	// 选择日期
	const showSelectDate = (type)=>{
		if(!props.isSelectDate){
			return
		}
		if(type == 'start'){
			datePickerStartRef.value.open()
		}
		else{
			datePickerEndRef.value.open()
		}
	}
	// 开始日期选择回调
	const confirmStart = (res)=>{
		selectDateValue_start.value = res.value
		startDate.value = dayjs(selectDateValue_start.value).format('YYYY-MM-DD')
	}
	// 结束日期选择回调
	const confirmEnd = (res)=>{
		selectDateValue_end.value = res.value
		endDate.value = dayjs(selectDateValue_end.value).format('YYYY-MM-DD')
	}
</script>

<style lang="scss" scoped>
	.store-upgrade-date-layout {
		background-color: #ffffff;
		padding: 0 30rpx;
		height: 100rpx;
		display: flex;
		align-items: center;

		.store-upgrade-date-title {
			flex-shrink: 0;
		}

		.store-upgrade-date-right {
			margin-left: 30rpx;
			display: flex;
			align-items: center;
			width: 100%;

			.store-upgrade-date-space {
				flex-shrink: 0;
			}

			.store-upgrade-date-text {
				text-align: center;
				flex: 1;
				flex-shrink: 0;
			}

			.placeholder-text {
				color: #cccccc;
			}
		}
	}
</style>